class MatrixEffect {
    constructor() {
        // 延迟初始化，确保 DOM 完全加载
        setTimeout(() => {
            this.initMatrix();
        }, 100);
    }

    initMatrix() {
        this.canvas = document.getElementById('matrixBg');
        if (!this.canvas) {
            console.error('Matrix canvas not found!');
            return;
        }
        
        this.ctx = this.canvas.getContext('2d');
        if (!this.ctx) {
            console.error('Could not get 2D context!');
            return;
        }
        
        console.log('Matrix effect initialized');
        
        // 添加更多字符，包括中文
        this.characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789密码加密安全系统认证口令密钥@#$%^&*';
        this.fontSize = 14;
        this.drops = [];
        
        // 初始化
        this.resizeCanvas();
        window.addEventListener('resize', () => this.resizeCanvas());
        
        // 开始动画
        this.animate();
    }

    resizeCanvas() {
        if (!this.canvas) return;
        
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        
        console.log(`Canvas resized to ${this.canvas.width}x${this.canvas.height}`); // 调试信息
        
        this.columns = Math.floor(this.canvas.width / this.fontSize);
        this.drops = Array(this.columns).fill(1).map(() => -Math.random() * 100);
    }

    draw() {
        if (!this.ctx || !this.canvas) return;
        
        // 创建半透明的遮罩效果
        this.ctx.fillStyle = 'rgba(0, 27, 46, 0.1)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        // 设置文字样式
        this.ctx.font = `${this.fontSize}px "Courier New", monospace`;
        
        for (let i = 0; i < this.columns; i++) {
            const char = this.characters[Math.floor(Math.random() * this.characters.length)];
            const x = i * this.fontSize;
            const y = this.drops[i] * this.fontSize;

            // 创建渐变色效果
            const gradient = this.ctx.createLinearGradient(x, y - this.fontSize, x, y);
            gradient.addColorStop(0, 'rgba(0, 168, 255, 0)');
            gradient.addColorStop(0.8, 'rgba(0, 168, 255, 0.3)');
            gradient.addColorStop(1, 'rgba(0, 168, 255, 0.1)');
            
            this.ctx.fillStyle = gradient;
            this.ctx.fillText(char, x, y);

            // 当字符到达底部时，随机决定是否重置到顶部
            if (y > this.canvas.height && Math.random() > 0.975) {
                this.drops[i] = 0;
            }

            // 调整下落速度
            this.drops[i] += 0.5;
        }
    }

    animate() {
        if (!this.ctx || !this.canvas) return;
        
        this.draw();
        requestAnimationFrame(() => this.animate());
    }
}

// 等待页面完全加载后再初始化
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
        console.log('Initializing Matrix effect...');
        new MatrixEffect();
    });
} else {
    console.log('Initializing Matrix effect...');
    new MatrixEffect();
}

// 添加错误处理
window.addEventListener('error', (e) => {
    console.error('Matrix effect error:', e);
});